<template>
  <div class="container">
    <el-dialog
      :title="`${title}用户`"
      :visible="showDialog"
      width="600px"
      :before-close="handleClose"
    >
      <el-form
        :model="usersForm"
        :rules="usersFormRules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="usersForm.shortName"></el-input>
        </el-form-item>
        <el-form-item>
          <label>
            <input v-model="usersForm.isFamous" type="checkbox" />是否为名企
          </label>
        </el-form-item>

        <el-form-item label="所属公司" prop="company">
          <el-input v-model="usersForm.company"></el-input>
          <el-row
            >https://www.tianyancha.com(再次可以查询所属公司全程及简称)</el-row
          >
        </el-form-item>

        <el-form-item label="城市" prop="province">
          <el-select
            style="width: 100px"
            v-model="usersForm.province"
            @change="changeProvince"
          >
            <el-option
              v-for="item in provinces"
              :key="item.id"
              :value="item.pro"
              :label="item.pro"
            >
            </el-option>
          </el-select>
          <el-select style="width: 100px" v-model="usersForm.city">
            <el-option
              v-for="item in city"
              :key="item.id"
              :value="item.pro"
              :label="item.pro"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="企业标签" prop="tags">
          <el-input v-model="usersForm.tags"></el-input>
        </el-form-item>

        <el-form-item label="备注" prop="remarks">
          <el-input v-model="usersForm.remarks" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="8">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button type="primary" size="small" @click="addDepartments"
            >确定</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { provinces, citys1 } from "@/api/hmmm/citys.js";
import { add, detail, update } from "@/api/hmmm/companys";
export default {
  props: {
    showDialog: {
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {
      // 新增用户表单
      usersForm: {
        isFamous: false,
        shortName: "",
        company: "",
        province: "",
        city: "",
        tags: "",
        remarks: "",
      },

      // 新增用户表单校验规则
      usersFormRules: {
        isFamous: [{ required: true, message: "必填项", trigger: "blur" }],
        shortName: [{ required: true, message: "必填项", trigger: "blur" }],
        company: [{ required: true, message: "必填项", trigger: "blur" }],
        province: [{ required: true, message: "必填项", trigger: "blur" }],
        city: [{ required: true, message: "必填项", trigger: "blur" }],
        tags: [{ required: true, message: "必填项", trigger: "blur" }],
        remarks: [{ required: true, message: "必填项", trigger: "blur" }],
      },
      provinces: [],
      city: [],
    };
  },

  created() {
    this.getProvince();
  },
  computed:{
    title(){
      return this.usersForm.id?'编辑':'新增'
    }
  },
  methods: {
    // 关闭按钮
    handleClose() {
      this.usersForm = {
        isFamous: false,
        shortName: "",
        company: "",
        province: "",
        city: "",
        tags: "",
        remarks: "",
      };
      this.$emit("update:showDialog", false);
    },

    // 获取省份 下拉
    getProvince() {
      this.provinces = provinces(); //这个是获取省份下拉
    },

    // 当省份变化的时候  拿到一个值
    changeProvince(val) {
      this.city = citys1(val);
    },

    // 增加,编辑按钮
    async addDepartments() {
      if (this.usersForm.id) {
        // console.log("走的编辑");
        await update(this.usersForm);
      } else {
        // console.log('走的添加')
        await add(this.usersForm);
      }

      this.$emit("addCompleted");
      this.btnCancel();
    },

    // 取消按钮
    btnCancel() {
      this.handleClose();
    },

    // 定义渲染按钮
    // 定义回显
    async getDetail(data) {
      const res = await detail(data);
      let flag = res.data === 0 ? false : true;
      this.usersForm = { ...res.data, isFamous: flag };
      this.$emit("update:showDialog", true);
    },
  },
};
</script>

<style scoped lang='less'></style>
